<template>
	<div>
		<image src="/static/images/login/login-header.png" class="es-login__header-bg"	mode="widthFix"></image>
		
		<view class="es-custom-bar" :style="{height:customBar+'px'}">
			<view class="es-custom-bar__back" :style="{marginTop:statusBar+'px'}" @tap="navigateBack">
				<text class="esfont es-custom-bar__back__icon">&#xe6be;</text>
			</view>
		</view>
		
		<view class="es-login-wrapper" >
			<view class="w750 flex-column flex-center">
				<text class="es-login__banner">{{loginTitle}}</text>
				<text class="es-login__tips">未注册的手机号登录成功后将自动注册</text>
			</view>
			
			<view class="es-login-main">
				<view class="es-login__input">
					<text class="es-login-phone__zone">+86</text>
					<input class="es-login-phone__input" v-model="formData.phone" @input="onPhoneInput" maxlength="11"
						type="number" placeholder="请输入手机号" placeholder-class="es-login-input__placeholder"></input>
				</view>
				<view class="es-login__input">
					<template v-if="phoneLoginType=='phone'">
						<input class="es-login-code__input"  v-model="formData.code" @input="onCodeInput" :maxlength="6" type="number"
							:focus="focus" placeholder="请输入验证码" placeholder-class="es-login-input__placeholder">
						</input>
						<view class="es-login-code__btn" :class="{'es-login-code__btn--disabled':formData.phone.length<11 || count>0}"
							@click="sendCode">
							<image v-if="smsLoading" src="/static/images/login/loading.gif" class="es-login-loading"></image>
							<text v-else class="es-login-code__btn__text">{{count>0?count+'秒后重发':'获取验证码'}}</text>
						</view>
					</template>
					<template v-else>
						<input class="es-login-code__input w450" v-model="formData.password" @input="onPasswordInput" :maxlength="20"
						:password="!showPassword"	:focus="focus" placeholder="请输入密码" placeholder-class="es-login-input__placeholder">
						</input>
						<text class="esfont es-login-password__icon" v-if="showPassword" @tap="showPassword=false">&#xe71c;</text>	
						<text class="esfont es-login-password__icon" v-else @tap="showPassword=true">&#xe71d;</text>	
					</template>
				</view>

				<view class="es-login-change" @tap="onChangeLoginType">
					<text class="esfont es-login-change__icon">&#xe652;</text>
					<text class="es-login-change__text">{{changeText}}</text>
				</view>

				<view class="es-login-submit" @tap="handlePhoneLogin" :style="{opacity:opacity}">
					<image v-if="loginLoading" src="/static/images/login/loading.gif" class="es-login-loading"></image>
					<text v-else class="es-login-submit__text">登录</text>
				</view>
			</view>
			
			<view>
				<view class="es-login-other">
					<view class="flex-center">
						<view class="es-login-type">
							<!-- 苹果登录 -->
							<view @tap="doLogin('apple')" class="es-login-type__item" style="background: #1E1E1E;">
								<text class="es-login-type__icon esfont">&#xe6e2;</text>
							</view>
							
							<!-- 小程序登录 -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="es-login-type__item" style="background: #0DAD00">
								<text class="es-login-type__icon esfont">&#xe6b1;</text>
								<button  class="es-login-button" open-type="getUserInfo" @getuserinfo="doLogin('weapp')"></button>
							</view>
							<!-- #endif -->
							
							<!-- app-微信登录 -->
							<!-- #ifdef APP -->
							<view @tap="doLogin('weixin')" class="es-login-type__item" style="background: #0DAD00">
								<text class="es-login-type__icon esfont">&#xe6b1;</text>
							</view>
							<!-- #endif -->
							
							<!-- qq登录 -->
							<view @tap="doLogin('qq')" class="es-login-type__item" style="background: #1ABAEF;">
								<text class="es-login-type__icon esfont">&#xe6b3;</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 用户隐私与协议 -->
				<es-agreement ref="agreement" :checked="checked" :showDialog="showDialog" :loginType="loginType" color="#888888"
					userHref="http://www.esionet.com" privacyHref="http://www.esionet.com" juniorHref="http://www.esionet.com"
					@href="tapHref"	@confirm="onConfirm" @change="onChangeCheck"></es-agreement>
					
			</view>
		</view>

	</div>
</template>

<script>
	import login from './login.js'
	import esAgreement from '/components/es-agreement/es-agreement';
	export default {
		components:{
			esAgreement
		},
		data() {
			return {
				showDialog:false,
				loginType:'',
				phoneLoginType:'phone',//phone password
				showPassword:false,
				loginTitle:"",
				checked: false,
				customBar: 0,
				statusbar: 0,
				bottomHeight: 0,
				formData: {
					phone: "",
					code: "",
					password:""
				},
				timer: null,
				count: 0,
				codeDisabled: true,
				smsLoading: false,
				loginLoading: false,
				loading:false,
				focus:false
			}
		},
		watch:{
			loading() {
				if (this.loading) {
					uni.showLoading();
				} else {
					uni.hideLoading();
				}
			},
			phoneLoginType:{
				immediate:true,
				handler(){
					if(this.phoneLoginType == 'phone'){
						this.loginTitle = "手机号登录";
						this.changeText = "密码登录"
					}else{
						this.loginTitle = "密码登录";
						this.changeText = "手机号登录"
					}
				}
			}
		},
		computed:{
			opacity(){
				if(this.phoneLoginType == 'phone'){
					return	this.loginLoading || this.formData.phone.length<11 || this.formData.code.length<6 ? 0.5:1
				}else{
					return	this.loginLoading || this.formData.phone.length<11 || this.formData.password.length<8 ? 0.5:1
				}
			}
		},
		created() {
			uni.getSystemInfo({
				success: e => {
					this.bottomHeight = e.screenHeight - e.safeArea.bottom;
					this.statusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						this.customBar = e.statusBarHeight + 50
					} else {
						this.customBar = e.statusBarHeight + 45
					}
				}
			});
		},
		onLoad(options){
			this.phoneLoginType = options.loginType||"phone";
		},
		methods: {
			//登录成功，请根据实际业务需求编写代码
			loginSuccess(res){
				uni.showToast({
					title:"登录成功"
				})
				setTimeout(()=>{
					this.loginLoading = false;
				},2000)
			},
			//点击协议回调，请根据实际业务跳转到webview页面
			tapHref(e){
				uni.showToast({
					icon:"none",
					title:e.title+'-'+e.href
				})
			},
			onConfirm(loginType){
				this.checked = true;
				this.doLogin(loginType);
			},
			doLogin(loginType){
				this.loginType = loginType;
				//是否已同意隐私政策与协议
				if(!this.checked && !this.$refs.agreement.showDialog){
					this.$refs.agreement.showDialog = true;
					return;
				}
				
				if (loginType == "weapp") {
					this.weappLogin();
				} else if(loginType == "weixin"){
					this.wxLogin();
				}else if(loginType == "apple"){
					// #ifdef MP-WEIXIN
					uni.showToast({
						icon:"none",
						title:"请在APP中使用"
					})
					return;
					// #endif
					this.appleLogin();
				}
				else if(loginType == "qq"){
					// #ifdef MP-WEIXIN
					uni.showToast({
						icon:"none",
						title:"请在APP中使用"
					})
					return;
					// #endif
					this.qqLogin();
				}else if(this.phoneLoginType == 'phone'){
					this.phoneLogin()
				}else if(this.phoneLoginType == 'password'){
					this.passwordLogin()
				}
			},
			//手机号登录
			handlePhoneLogin(){
				this.loginType = this.phoneLoginType;
				if(this.phoneLoginType == "phone"){
					if (this.loginLoading || this.formData.phone.length < 11 || this.formData.code.length < 6) {
						return;
					}
					//是否已同意隐私政策与协议
					if(!this.checked && !this.$refs.agreement.showDialog){
						this.$refs.agreement.showDialog = true;
						return;
					}
					this.phoneLogin()
				}else{
					if (this.loginLoading || this.formData.phone.length < 11 || this.formData.password.length < 8) {
						return;
					}
					//是否已同意隐私政策与协议
					if(!this.checked && !this.$refs.agreement.showDialog){
						this.$refs.agreement.showDialog = true;
						return;
					}
					this.passwordLogin()
				}
			},
			//密码登录
			passwordLogin(){
				this.$refs.agreement.showDialog = false;
				this.loginLoading = true;
				let formData = {
					phone:this.formData.phone,
					password:this.formData.password,
				}
				//1.此处直接返回登录成功
				this.loginSuccess();
				//2.todo 请根据实际业务编写密码登录请求代码
			},
			//手机号登录
			phoneLogin(){
				this.$refs.agreement.showDialog = false;
				this.loginLoading = true;
				
				//1.此处直接返回登录成功
				this.loginSuccess();
				//2.todo 请根据实际业务编写手机号登录请求代码
			},
			//小程序登录
			weappLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				//此处直接返回登录成功，请修改login.js中的接口请求方法
				login.weappLogin().then(res => {
					//微信登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			
			},
			//app-微信登录
			wxLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				login.wxLogin().then(res => {
					//微信登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			
			},
			//app-苹果登录
			appleLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				login.appleLogin().then(res => {
					//苹果账号登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			},
			//app-qq登录
			qqLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				login.qqLogin().then(res => {
					//苹果账号登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			},
			//发送验证码
			sendCode() {
				if (this.count != 0 || this.smsLoading) {
					return;
				}
				if (!this.formData.phone || this.formData.phone.length<11) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return;
				}
				this.smsLoading = true;
				let postData = {
					phone: this.formData.phone
				}
				uni.hideKeyboard();
				let _this = this;
				
				//1.此处默认返回验证码发送成功
				setTimeout(()=>{
					this.sendCodeSuccess();
				},1500)
				//2.todo 请调用真实验证码接口
			},
			//验证码发送成功
			sendCodeSuccess(){
				let _this = this;
				_this.smsLoading = false;
				_this.count = 60;
				_this.timer = setInterval(() => {
					_this.count--;
					if (_this.count <= 0) {
						clearInterval(_this.timer)
					}
				}, 1000)
				_this.focus = true;
				uni.showToast({
					icon: "none",
					title: "验证码已发送，请注意查看"
				})
			},
			onChangeCheck(checked){
				this.checked = checked;
			},
			onChangeLoginType(){
				this.phoneLoginType = this.phoneLoginType=='phone'?'password':'phone'
			},
			onPhoneInput(e) {
				this.formData.phone = e.detail.value;
			},
			onCodeInput(e) {
				this.formData.code = e.detail.value;
			},
			onPasswordInput(e) {
				this.formData.password = e.detail.value;
			},
			navigateBack() {
				let pages = getCurrentPages();
				if(pages.length == 1){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style>
	.w750{
		width: 750rpx;
	}
	
	.w450{
		width: 450rpx;
	}
	
	.flex-column{
		flex-direction: column;
	}
	
	.flex-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.es-login-loading{
		width: 30rpx;
		height: 30rpx;
	}
	
	.es-login-input__placeholder {
		font-size: 36rpx;
		color: #bbbbbb;
	}
	
	.es-login__image-bg{
		width: 750rpx;
		height:100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.es-custom-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
	}
	
	.es-custom-bar__back {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 68rpx;
		height: 68rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		margin-left: 30rpx
	}
	
	.es-custom-bar__back__icon {
		font-size: 30rpx;
		color: #ffffff;
	}
	
	.es-login-wrapper {
		position: relative;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
	}
	
	.es-login__header-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		z-index: 1;
	}

	.es-login__banner {
		margin-top: 220rpx;
		font-size: 50rpx;
		font-weight: 500;
		color: #1E1E1E;
	}

	.es-login__tips {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #BBBBBB;
	}

	.es-login-main {
		width: 550rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.es-login__input {
		width: 550rpx;
		height: 100rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #DADADA;
	}

	.es-login-phone__zone {
		font-size: 36rpx;
		color: #888888;
	}

	.es-login-phone__input {
		width: 450rpx;
		height: 58rpx;
		font-size: 36rpx;
		line-height: 36rpx;
		border-left: 1rpx solid #DADADA;
		padding: 0 30rpx;
		margin-left: 30rpx;
	}

	.es-login-code__input {
		width: 300rpx;
		height: 58rpx;
		font-size: 36rpx;
	}

	.es-login-code__btn {
		width: 168rpx;
		height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: #45D4A8;
		background: linear-gradient(to right, #47dabd, #45D4A8);
		border-radius: 29rpx;
	}

	.es-login-code__btn__text {
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.es-login-code__btn--disabled {
		opacity: 0.5;
	}

	.es-login-password__icon{
		font-size: 34rpx;
		color: #666666;
		margin-right: 15rpx;
	}

	.es-login-change{
		width: 500rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.es-login-change__icon {
		color: #586c94;
		font-size: 24rpx;
	}

	.es-login-change__text {
		color: #586c94;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.es-login-submit {
		width: 550rpx;
		height: 96rpx;
		background: linear-gradient(to right, #47dabd, #45D4A8);
		border-radius: 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 110rpx;
	}

	.es-login-submit__text {
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.es-login-other {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		height: 200rpx;
	}
	
	.es-login-type {
		width: 500rpx;
		height: 100rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		transition-property: height;
		transition-duration: 0.3s;
		transition-timing-function: ease-in;
		transition-delay: 0;
	}
	
	.es-login-type__item {
		background: #F6F8FB;
		width: 100rpx;
		height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.es-login-type__icon {
		font-size: 50rpx;
		color: #ffffff;
	}
	
	.es-login-button{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
	}
	
</style>